<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>教师管理系统 - 教师主页</title>
  <link rel="stylesheet" href="/static/css/layui.css">

  <style>
    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      background: linear-gradient(to bottom, #1c1c1c, #333); /* 深色渐变背景 */
    }

    /* 顶部导航条 */
    .navbar {
      background-color: #272f36; /* 深灰色背景 */
      color: white;
      padding: 15px;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* 信息展示区域 */
    .info-container {
      display: flex;
      justify-content: space-around;
      padding: 30px;
      flex-wrap: wrap;
    }

    /* 信息展示卡片样式 */
    .info-card {
      background-color: #272f36; /* 深灰色 */
      border-radius: 8px;
      padding: 30px;
      margin: 15px;
      width: 250px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
      transition: transform 0.3s ease;
      color: #ffffff;
    }

    .info-card:hover {
      transform: scale(1.05);
    }

    .info-card h2 {
      font-size: 32px;
      margin: 10px 0;
      color: #ffcc80; /* 柔和的橙色 */
    }

    .info-card p {
      font-size: 18px;
    }

    .info-icon {
      font-size: 48px; /* 图标大小 */
      margin-bottom: 10px;
      color: #ffcc80; /* 柔和的橙色 */
    }

    /* 通知区块 */
    .notice-section {
      background-color: #272f36; /* 深灰色 */
      margin: 20px;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      color: #ffffff;
    }

    .notice-section h2 {
      font-size: 22px;
      margin-bottom: 15px;
      color: #ffcc80; /* 柔和的橙色标题 */
    }

    .notice-list {
      list-style: none;
      padding: 0;
    }

    .notice-list li {
      padding: 12px 0;
      border-bottom: 1px solid #757575;
    }

    .notice-list li:last-child {
      border-bottom: none;
    }

    /* 响应式布局 */
    @media (max-width: 768px) {
      .info-container {
        flex-direction: column;
        align-items: center;
      }
    }
  </style>
</head>

<body>

  <!-- 顶部导航条 -->
  <div class="navbar">
    教师管理系统
  </div>

  <!-- 信息展示区域 -->
  <div class="info-container">
    <div class="info-card">
      <div class="info-icon">📚</div>
      <h2 class="subject-count"></h2>
      <p>管理的课程</p>
    </div>
    <div class="info-card">
      <div class="info-icon">👩‍🎓</div>
      <h2 class="student-count"></h2>
      <p>本班学生人数</p>
    </div>
    <div class="info-card">
      <div class="info-icon">📝</div>
      <h2 class="exam-count"></h2>
      <p>已安排考试</p>
    </div>
  </div>

  <!-- 通知部分 -->
  <div class="notice-section">
    <h2>系统通知</h2>
    <ul class="notice-list" id="notice-list">
      <!-- 通知数据插入处 -->
    </ul>
  </div>

  <script>
    layui.use(['layer', 'jquery'], function () {
      var $ = layui.jquery;
      var layer = layui.layer;

      // 获取课程数量、学生人数等信息
      $.ajax({
        url: '/get_count',
        method: 'GET',
        success: function (data) {
          $('.subject-count').text(data.subject_count + ' 门');
          $('.student-count').text(data.student_class_count + ' 人');
          $('.exam-count').text(data.exam_count + ' 场');
        },
        error: function () {
          layer.msg('数据加载失败！');
        }
      });

      // 获取系统通知
      $.ajax({
        url: '/notices',
        method: 'GET',
        success: function (data) {
          var noticeList = $('#notice-list');
          noticeList.empty();

          data.forEach(function (notice) {
            var listItem = `
              <li>📢 <strong>${notice.created_time}:</strong> ${notice.content}</li>
            `;
            noticeList.append(listItem);
          });
        },
        error: function () {
          console.error('加载通知失败');
        }
      });
    });
  </script>
</body>
</html>
